import { Tag } from 'antd';
import React, { ReactNode } from 'react';

import { SvgIcon } from '@/components/icon';

export interface CollapsibleSectionProps {
  title: string;
  subtitle: string;
  isExpanded: boolean;
  onToggle: () => void;
  children: ReactNode;
  tag?: string;
  type?: string;
  className?: string;
}

const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
  title,
  subtitle,
  isExpanded,
  onToggle,
  children,
  tag,
  type = 'input',
  className = '',
}) => {
  return (
    <div className={`px-4 ${className}`}>
      <div
        className={`${
          isExpanded ? 'rounded-t-xl' : 'rounded-xl'
        } flex cursor-pointer items-center justify-between bg-fill-2 p-3 transition-all duration-200`}
        onClick={onToggle}
      >
        <div className="flex items-center gap-3">
          <div className="flex flex-col gap-2">
            <span className="text-sm font-font-weight-600 text-text-5">{title}</span>
            <span className="text-xs text-text-4">{subtitle}</span>
          </div>
        </div>
        <div className="flex items-center gap-2">
          {tag && (
            <Tag color="blue" className="text-indigo-700 bg-indigo-100 text-xs">
              {tag}
            </Tag>
          )}
          <SvgIcon
            icon="arrow-right"
            className={`h-4 w-4 text-gray-400 transition-transform duration-200 ${
              isExpanded ? 'rotate-90' : ''
            }`}
          />
        </div>
      </div>

      <div
        className={`rounded-b-xl bg-fill-2 transition-all duration-300 ${
          isExpanded ? 'max-h-none opacity-100' : 'max-h-0 overflow-hidden opacity-0'
        }`}
      >
        <div className="relative rounded-b-xl bg-fill-2">{children}</div>
      </div>
    </div>
  );
};

export default CollapsibleSection;
